import React from 'react'
import { BaseListPage, http, IBaseListPageState, IBaseListPageProps, UdDateRangePicker } from '@/lib'
import { Select, Tag, Tooltip } from 'antd'
import udMainStore from '@/store/UdMain'
import UdSelect from '@/components/UdFormControls/UdSelect'
import apis from '@/apis/MonitoringAndWarning'
import _ from 'lodash'
import { dataRange} from '@/utils/methods'
const { Option } = Select
export default class ReceiveRecordLog extends BaseListPage<IProps, IState> {
  protected useConditionsField = true
  public brandList = udMainStore.brandList
  private STATUS_ENUM: any = {
    0: '成功',
    1: '失败',
  }
  constructor(props) {
    super(props)
    this.state = {
      title: '接收记录日志',
      queryApi: apis.queryReceiveRecord,
      rowKey: 'id',
      moduleList: [],
      conditions: [
        {
          id: ['beginTime', 'endTime'],
          label: '起止时间',
          render: <UdDateRangePicker ranges={dataRange} valueFormat={['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']} />,
        },
        {
          id: 'lzljMonitorTypeId',
          label: '功能模块',
          render: () => (
            <UdSelect
              placeholder="请选择功能模块"
              options={
                this.state.moduleList.map(({ id: value, typeName: title }) => ({ value: value + '', title })) || []
              }
              showSearch={true}
              optionFilterProp="children"
            />
          ),
        },
        {
          id: 'pullState',
          label: '接收结果',
          render: () => (
            <Select placeholder="请选择接收结果">
              <Option value={0}>成功</Option>
              <Option value={1}>失败</Option>
            </Select>
          ),
        },
      ],
      columns: [
        { title: '序号', dataIndex: 'id', key: 'id', width: 50, render: (text, reoled, index) => index + 1 },
        { title: '品牌公司', dataIndex: 'brandName', width: '200px' },
        {
          title: '功能模块',
          dataIndex: 'lzljMonitorTypeId',
          minWidth: '130px',
          render: (text, record) => {
            let moduleList = _.groupBy(this.state.moduleList, 'id')
            return moduleList[text][0].typeName
          },
        },
        { title: '日期', dataIndex: 'createTime', width: '200px' },
        { title: '用户手机号', dataIndex: 'userPhone', width: '130px' },
        {
          title: '接收结果',
          dataIndex: 'pullState',
          width: '80px',
          render: (text, record) => {
            let state = this.STATUS_ENUM[text]
            let color = {
              0: '#07c160',
              1: '#ee0a24',
            }
            return <Tag color={color[text]}>{state}</Tag>
          },
        },
        {
          title: '接收内容',
          dataIndex: 'pullContent',
          width: '300px',
          render: (text, record) => {
            return (
              <Tooltip title={record.pullContent}>
                <div style={{ width: '300px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                  {record.pullContent}
                </div>
              </Tooltip>
            )
          },
        },
        {
          title: '状态',
          dataIndex: 'resultState',
          width: '60px',
          render: (text, record) => {
            let state = this.STATUS_ENUM[text]
            let color = {
              0: '#07c160',
              1: '#ee0a24',
            }
            return <Tag color={color[text]}>{state}</Tag>
          },
        },
        {
          title: '返回内容',
          dataIndex: 'resultContent',
          width: '300px',
          render: (text, record) => {
            return (
              <Tooltip title={record.resultContent}>
                <div style={{ width: '300px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                  {record.resultContent}
                </div>
              </Tooltip>
            )
          },
        },
      ],
      tableProps: {
        rowSelection: null,
        scroll: { x: true },
        rowKey: 'id',
      },
    }
  }
  componentDidMount(): void {
    super.componentDidMount()
    this.getModuleList()
  }
  private getModuleList = () => {
    http.post(apis.queryWarningStatisticsType, { type: 1 }).then(res => {
      const moduleList = res.data ?? []
      this.setState({ moduleList })
    })
  }
}
interface IState extends IBaseListPageState {
  moduleList: any[]
}
interface IProps extends IBaseListPageProps {}
